<template>
  <el-link type="primary" :class="{ showButton: true, show: modelValue }" :underline="false" @click="toggle">
    <el-icon>
      <ArrowUp v-if="modelValue" />
      <ArrowDown v-else />
    </el-icon>
    {{ foldName }}
  </el-link>
</template>

<script setup>
import { computed } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

// 组件名称
defineOptions({
  name: 'DkFoldLink'
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const foldName = computed(() => {
  return props.modelValue === false ? '展开' : '收起'
})

const toggle = () => {
  emit('update:modelValue', !props.modelValue)
}
</script>

<style scoped>
.showButton {
  @apply mx-2;
}
</style>
